
import React,{useState} from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();
  const [aa,setAa]=useState(true)
  const [bb,setbb]=useState(false)
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
    form={form}
      name="basic"
      onValuesChange={(e)=>{
        if(e.hasOwnProperty('username')){
          if(e.username==123){
            setAa(false)
          }
          if(e.username==1234){
            setbb(true)
          }
        }
        
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: aa,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

{bb&&      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>
}

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo


// // /*
// //  * @Descripttion:
// //  * @version:
// //  * @Author: ChenXiang
// //  * @Date: 2021-07-24 22:52:52
// //  * @LastEditors: ChenXiang
// //  * @LastEditTime: 2021-08-20 09:12:14
// //  */

// // import React, { useEffect } from "react";
// // import { createForm } from "./rc-form";
// // import { Input, Button } from "antd";
// // const nameRules = { required: true, message: "请输入姓名" },
// // class MyRCForm extends React.Component {
// //   // constructor(props) {
// //   //   super(props)
// //   // }
// //   componentDidMount() {
// //     // this.props.form.setFieldsValue({ username: 'default' })
// //   }
// //   submit = () => {
// //     const { getFieldsValue } = this.props.form;
// //     console.log('submit', getFieldsValue())
// //   }
// //   render() {
// //     console.log('this.props', this.props)
// //     // const { getFieldDecorator } = this.props.form;
// //     return (
// //       <div>
// //         {/* {getFieldDecorator("username", { rules: [nameRules] })(<Input />)} */}
// //         <button onClick={() => this.submit()}>确定</button>
// //       </div>
// //     )
// //   }

// // }
// // export default createForm()(MyRCForm);



// import React, { useEffect ,useState } from "react";
// import Form, { Field } from "rc-field-form";
// import { Input, Button } from "antd";

// export default function MyRc(props) {
//   // var a = [{ name: 'cx' }]
//   // const [demo] = a;
//   // console.log(demo)//{name:cx}
//   const [form] = Form.useForm();
//   const [demoRequire,setDemoRequire]=useState(false);
//   const onFinish = (val) => {
//     console.log("onFinish", val);
//   };
//   const onFinishFailed = (val) => {
//     console.log("onFinishError", val);
//   };

//   useEffect(() => {
//     form.setFieldValue({
//       password: "qq"
//     });
//   }, []);

//   return (
//     <div>
//       <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
//         <button onClick={()=>setDemoRequire(!demoRequire)}>{demoRequire?'true':'false'}</button>
//         <Field
//           name="age"
//           rules={[
//             {
//               required: demoRequire,
//               message: "Please input your Username!"
//             }
//           ]}
//         >
//           <Input placeholder="age" />
//         </Field>
//       {demoRequire&&<Field
//         name="username"
//         rules={[
//           {
//             required: demoRequire,
//             message: "Please input your Username!"
//           }
//         ]}
//       >
//         <Input placeholder="Username" />
//       </Field>}
//         <Field
//           name="password"
//           rules={[
//             {
//               required: demoRequire,
//               message: "Please input your Password!"
//             }
//           ]}
//         >
//           <Input type="password" placeholder="Password" />
//         </Field>

//         <Button
//           onClick={() => {
//             form.submit();
//           }}
//           className="login-form-button"
//         >
//           Log in
//         </Button>
//       </Form>
//     </div>
//   );
// }
